<script setup>
import { ref, defineProps, defineEmits, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { formatDate, getFourDays } from '@/utils/index.js'
import { showToast } from 'vant';


const router = useRouter()
const emit = defineEmits(['closePopup'])
const props = defineProps({
  showPopup: Boolean,
  goodsKindsInfolist: Object,
  sessionlist: Object,
  dateInfoArraylist: Object,
  minDate: Object,
  maxDate: Object,
  scenicId: String,
  sortid: String,
  marketPrice: String,
  productid: String
})
console.log(props.minDate, props.maxDate);
const number = ref(1)
const price = ref(props.marketPrice)
const allPrice = ref(price.value)
const showTime = ref(false)
const moreTimeClick = () => {
  showTime.value = true
}

const numberChange = (number) => {
  console.log(allPrice.value);
  allPrice.value = (price.value * 10000) * number / 10000

}

const ticketTypes = ref(0)
const ticketTypesClick = (key, item) => {
  console.log(item);
  price.value = item.marketPrice
  ticketTypes.value = key
  allPrice.value = (item.marketPrice * 10000) * number.value / 10000
  // number.value =1

}

const session = ref(0)
const sessionClick = (key) => {
  session.value = key

}

const timeList = ref(getFourDays())
const timeKey = ref('')
const timeKeyDate = computed(() => new Date(timeKey.value)); // 将日期字符串转换为日期对象
console.log('timeList', timeList.value)
const timeChangeClick = (key) => {
  console.log(key, "datas");
  timeKey.value = key

}
onMounted(() => {
  if (timeList.value?.length > 0) {
    timeChangeClick(timeList.value[0].yearTime);
  }
  if (props.sessionlist?.length > 0) {
    session.value = props.sessionlist[0].id;
  }
  if (props.productid?.length > 0) {
    ticketTypes.value = props.productid;
  }
});
const selectChange = (data) => {
  const time = formatDate(data)
  const repeat = timeList.value.some((item) => {
    return item.yearTime === time.yearTime
  })
  if (!repeat) {
    const len = timeList.value?.length
    timeList.value[len - 1] = time
  }
  timeKey.value = time.yearTime
  showTime.value = false

}

const closeBookPopup = () => {
  emit('closePopup')


}

const bookClick = () => {
  // console.log('门票种类id', ticketTypes.value, '场次id', session.value, '日期', timeKey.value, '景区id', props.scenicId, "商品id", ticketTypes.value);

  if (!ticketTypes.value) {
    showToast("未选择种类")
  } else if (!timeKey.value) {
    showToast("未选择日期")
  } else {
    router.push({path: '/scenicordel', query: { dateS: timeKey.value,
        vanum: number.value,
        scenicId: props.scenicId,  //景点id
        productid: ticketTypes.value, //商品id
        ticketTypes: props.sortid,//分类id
        sessionid: session.value, //场次id
      }
    })
  }



}
</script>

<template>
  <van-popup duration="0.3" teleport="body" class="van_popup" :style="{ 'max-height': '70%' }" v-model:show="props.showPopup" round
    position="bottom" @click-overlay="closeBookPopup">
    <div class="box" v-show="!showTime">
      <div class="header">
        <div class="name">大门票</div>
        <img @click="closeBookPopup" class="close" src="@/assets/images/icons/close-666666.png" alt="">
      </div>
      <div class="content">
        <div class="content_top">
          <div class="type" v-if="props.goodsKindsInfolist?.length > 0">
            <div class="name">门票种类</div>
            <div class="button_list">
              <div v-for="item in props.goodsKindsInfolist" :key="item.id" @click="ticketTypesClick(item.id, item)"
                class="button" :class="{ 'action_button': ticketTypes === item.id }">
                {{ item.ticketName }}
              </div>
            </div>
          </div>
          <div class="type" v-if="props.sessionlist?.length > 0">
            <div class="name">场次</div>
            <div class="button_list">
              <div v-for="item in props.sessionlist" :key="item.id" @click="sessionClick(item.id)" class="button"
                :class="{ 'action_button': session === item.id }">
                {{ item.beginTime }}-{{ item.endTime }}
              </div>
            </div>
          </div>
          <div class="time">
            <div class="name">使用日期</div>
            <div class="time_list">
              <div @click="timeChangeClick(item.yearTime)" v-for="item in timeList" :key="item.yearTime"
                class="time_button" :class="{ 'time_button_action': timeKey === item.yearTime }">
                <div class="top">{{ item.name }}</div>
                <div class="bottom">{{ item.time }}</div>
              </div>

              <div class="time_button more" @click="moreTimeClick">
                <div class="top">更多</div>
                <div class="bottom">日期</div>
              </div>
            </div>
          </div>
          <div class="number">
            <div class="name">购买数量</div>
            <van-stepper @change="numberChange" v-model="number" integer />
          </div>
        </div>
        <div class="popup_bottom">
          <div class="button_box">
            <div class="book_button" @click="bookClick">预订</div>
            <div class="price">
              <span class="icon">￥</span>
              <span class="price_number">{{ allPrice }}</span>
            </div>
            <div class="text">应付金额：</div>
          </div>
        </div>
      </div>
    </div>
    <van-calendar :default-date="timeKeyDate" v-show="showTime" :poppable="false" :show-confirm="false"
      :style="{ height: '58rem' }" :min-date="props.minDate" :max-date="props.maxDate" row-height="3rem"
      @select="selectChange" />
  </van-popup>
</template>

<style scoped lang="scss">
.box {
  padding: 0 2rem;

  .header {
    height: 2.8rem;
    margin-top: 2rem;
    justify-content: space-between;
    display: flex;
    margin-bottom: 1.5rem;

    .name {
      font-size: 2rem;
      font-weight: bold;
      color: #2F3836;

    }

    .close {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  .content {
    max-height: calc(70vh - 2rem - 2.8rem - 1.5rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    .content_top {
      padding-top: .5rem;
      overflow-y: auto;
      flex: 1;
    }

    .popup_bottom {
      height: 9rem;

      .button_box {
        padding-top: 1rem;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;

        .book_button {
          height: 3.8rem;
          line-height: 3.8rem;
          background: var(--van-primary-color);
          border-radius: .5rem;
          font-size: 1.6rem;
          color: #FFFFFF;
          padding: 0 3rem;
          margin-left: 1rem;
        }

        .book_button:active {
          background: #4b947f;
        }

        .price {
          color: #ED6316;
          width: 7rem;
          overflow: hidden;

          .icon {
            font-size: 1.4rem;
          }

          .price_number {
            font-size: 2.2rem;
          }
        }

        .text {
          font-size: 1.4rem;
          color: #999999;
        }
      }
    }
  }

  .type {
    margin-bottom: 2rem;

    .name {
      font-size: 1.4rem;
      color: #999999;
      line-height: 1.6rem;
      margin-bottom: 1rem;
    }

    .button_list {
      display: flex;
      flex-wrap: wrap;

      .button {
        height: 3rem;
        background: rgba(0, 0, 0, 0.05);
        border-radius: .5rem;
        font-size: 1.4rem;
        color: #666666;
        line-height: 3rem;
        text-align: center;
        padding: 0 1.5rem;
        margin-right: 1rem;
        margin-bottom: 1.5rem;
      }

      .action_button {
        color: #FFFFFF;
        background: var(--van-primary-color);
      }
    }
  }

  .time {
    .name {
      font-size: 1.4rem;
      color: #999999;
      line-height: 1.6rem;
      margin-bottom: 1rem;
    }

    .time_list {
      display: flex;
      justify-content: space-between;
      padding-bottom: 2rem;
      border-bottom: .1rem solid #EEEEEE;

      .time_button {
        width: 6.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 5.1rem;
        background: rgba(0, 0, 0, 0.05);
        border-radius: .5rem;
        font-size: 1.2rem;
        color: #666666;

        .top {
          margin-bottom: .3rem;
        }

        .button {
          margin-top: .3rem;
        }
      }

      .time_button_action {
        background-color: Var(--van-primary-color);
        color: #FFFFFF;
      }

      .time_button_disabled {
        color: #BBBBBB;
      }

      .more {
        color: var(--van-primary-color);
        width: 5.4rem;
      }
    }
  }

  .number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    margin-bottom: 4rem;

    .name {
      font-size: 1.4rem;
      color: #999999;
    }
  }

}</style>